import { ChangeEvent, KeyboardEvent, useState } from "react";
import {BsSearch} from "react-icons/bs";
const Search = ()=>{
    const [inputValue,setInputValue] = useState<string>("");
    const handleChange = (e:ChangeEvent<HTMLInputElement>) =>{
        setInputValue(e.currentTarget.value);
    }
    const handleSearch = (e:KeyboardEvent<HTMLInputElement>)=>{
        if (e.key !== 'Enter')return;
        
        console.log(e.currentTarget.value);
    }
    return (
        <>
            <div className="flex 
                    justify-center 
                    items-center 
                    relative
                    ">
                <input type="text"
                    value={inputValue}
                    onChange={handleChange}
                    onKeyDown={handleSearch}
                    placeholder="键入以搜索"
                    className="rounded-full
                                outline-none
                                pl-2
                                border-2
                                border-black
                                hover:bg-white
                                focus:ring-2 ring-rose-500
                                focus:border-white
                                w-30
                                h-8
                                "
                />
                <BsSearch size={24}
                    className="absolute
                    right-1
                    cursor-pointer"/>
            </div>
        </>
    );
}

export default Search;